<template>
  <div>
    <main-table
      :columns="tableColumns"
      :data="tableList"
      :loading="loading"
      :pagination="pagination"
      @getData="fetchTableList"
      wrapperHeight="350px" height="100%"
    >
     <el-table-column slot="action" fixed="right" label="操作" width="145">
       <template slot-scope="scope">
         <el-button size="mini" type="success" @click="editVisit(scope.row)">查看</el-button>
         <el-button size="mini" type="danger" @click="cancelOrderVisit(scope.row)">删除</el-button>
       </template>
     </el-table-column>
    </main-table>
    <div class="contacts-add" style="padding-top: 90px;">
      <!-- <el-button type="primary" @click="onSubmit">提交</el-button> -->
      <el-button @click="cancle">关闭</el-button>
    </div>

    <el-dialog
      title="就诊记录信息"
      :visible.sync="dialogVisitInfoVisible"
      :close-on-click-modal="false"
      width="700px"
      append-to-body>
      <visit-info v-if="dialogVisitInfoVisible" @cancle="dialogVisitInfoVisible = false" :data="ruleForm"></visit-info>
    </el-dialog>
</div>
</template>

<script>
import * as APIMedicalCareDisease from '@/api/medicalCareDisease';
import mainTable from "@/components/main-table/index";
import { unixToDate } from "@/utils";
import visitInfo from './visit-info';
export default {
  name: 'medicine-visit-older-info',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    mainTable,
    visitInfo
  },
  data () {
    return {
      loading: false,
      ruleForm:{},
      dialogVisitInfoVisible: false,
      searchForm: {
         page: 1
      },
      tableList:[],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      tableColumns: [
       {
         index: true,
         fixed: true,
         width: 70,
       },
       {
         prop: 'name',
         label: '姓名',
       },
       {
         prop: 'doc_name',
         label: '医师'
       },
       {
         prop: 'time',
         label: '就诊时间',
         width: 190,
         formatter (row, column, cellValue) {
           if(cellValue){
             return unixToDate(cellValue)
           }
         }
       },
       {
         prop: 'create_time',
         label: '添加时间',
         width: 190,
         formatter (row, column, cellValue) {
           return unixToDate(cellValue)
         }
       },
       {
         slot: 'action'
       }
      ],
    }
  },
  mounted () {
     // this.medicineGetarr()
  },
  methods: {
    editVisit (row) {
      this.key = Math.random();
      this.ruleForm = { ...row };
      this.dialogVisitInfoVisible = true
    },
    cancelOrderVisit(row) {
      this.$confirm("确定删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          APIMedicalCareDisease.jiuzhenjiDelete({ id: row.id }).then((resp) => {
            if (resp.code === 200) {
              this.$message({ type: "success", message: "删除成功!"});
              this.fetchTableList();
            }
          });
        })
        .catch(() => {
        });
    },
    fetchTableList(pageObj){
      const self = this;
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...pageObj,
        ...{ id_card: this.form['id_card'] }
      }
      APIMedicalCareDisease.jiuzhenjiLog(this.searchForm).then((resp) => {
        if (resp.code == 200) {
          const { list = [], total = 0 } = resp.data;
          this.tableList = list || []
          this.pagination.total = total;
        }
      }).finally(() => {
        this.loading = false
      });
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        if(newval.hasOwnProperty('id')){
          this.form = { ...newval };
           this.fetchTableList()
        }
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
.contacts-add {
  text-align: right;
}
.contract-text {
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin: 0;
}
.contract-img {
  width: 146px;
  height: 146px;
  cursor: pointer;
}
.my-label{
  width: 100px;
}
</style>
